<template>
  <a-row class="m-table-toolbar-wrap">
    <a-col :span="8" class="m-table-toolbar-left">
      <slot name="tableToolbarLeft"></slot>
    </a-col>
    <a-col :span="8" class="m-table-toolbar-center">
      <slot name="tableToolbarCenter"></slot>
    </a-col>
    <a-col :span="8" class="m-table-toolbar-right">
      <div class="m-table-toolbar-settings-left">
        <slot name="tableToolbarRight"></slot>
      </div>
      <div v-if="showSettings" class="m-table-toolbar-settings">
        <a-space>
        <a-tooltip>
          <template #title>刷新</template>
          <a-button shape="circle" class="m-table-toolbar-btn" @click="handleReload">
            <template #icon>
              <m-icon icon="ReloadOutlined"></m-icon>
            </template>
          </a-button>
        </a-tooltip>
        <a-dropdown>
          <a-tooltip>
            <template #title>密度</template>
            <a-button shape="circle" class="m-table-toolbar-btn" >
              <template #icon>
                <m-icon icon="ColumnHeightOutlined"></m-icon>
              </template>
            </a-button>
          </a-tooltip>
          <template #overlay>
            <a-menu @click="handleMenu" v-model:selectedKeys="selectedKeys">
              <a-menu-item key="default">默认</a-menu-item>
              <a-menu-item key="middle">中等</a-menu-item>
              <a-menu-item key="small">紧凑</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
        <a-tooltip>
          <template #title>列设置</template>
          <!--这里设置transitionName为了修复抖动问题，详见：https://github.com/ant-design/ant-design/issues/27102-->
          <a-popover placement="bottom" title="列展示" trigger="click" transitionName=''>
          <template #content>
            <a-checkbox-group v-model:value="checkboxKeys" @change="handleCheckboxGroup">
              <a-row>
                <a-col :span="24" v-for="column in columns" :key="column.key">
                  <a-checkbox :value="column.dataIndex">{{column.title}}</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </template>
          <a-button shape="circle" class="m-table-toolbar-btn" >
            <template #icon>
              <m-icon icon="SettingOutlined"></m-icon>
            </template>
          </a-button>
        </a-popover>
        </a-tooltip>
        </a-space>
      </div>
    </a-col>
  </a-row>
</template>
<script setup lang="ts">
import { PropType, onMounted, ref } from 'vue';
import { MTableColumnType, TableActionType } from './types';
import { useTableStore } from '/@/store/modules/table';
const tableStore = useTableStore()
const props = defineProps({
  showSettings: {
    type: Boolean,
    default: true
  },
  regisiter: {
    type: Object as PropType<TableActionType>
  },
  columns: { // 列定义
    type: Array as PropType<MTableColumnType[]>,
    default() {
      return []
    }
  },
  cacheKey: { // 缓存key
    type: String
  }
})
const selectedKeys = ref(['default'])
const checkboxKeys = ref<Array<any>>(props.columns?.map(item=>item.dataIndex) || [])
const getCacheKey = (): any =>{
  return props.cacheKey || ''
}
const handleReload= () =>{
  props.regisiter?.reload()
}
const handleMenu = (e: any) =>{
  props.regisiter?.setTableSize(e.key)
  selectedKeys.value = [e.key]
}
const handleCheckboxGroup = (e: any) => {
  tableStore.setCache(getCacheKey(), e)
  const newColumns = props.columns.filter(item=>e.includes(item.dataIndex))
  props.regisiter?.updateColumns(newColumns)
}
onMounted(()=>{
  const allColumnKeys = props.columns?.map(item=>item.dataIndex) || []
  let cacheCheckboxKeys = tableStore.getCache(getCacheKey(),allColumnKeys);
  if(!cacheCheckboxKeys) {
    cacheCheckboxKeys = allColumnKeys
    tableStore.setCache(getCacheKey(), cacheCheckboxKeys)
  }
  checkboxKeys.value = cacheCheckboxKeys
  // 触发更新
  handleCheckboxGroup(cacheCheckboxKeys)
})
defineExpose({
  setMiDuSelectdKeys(mSelectedKeys: any) {
    selectedKeys.value = mSelectedKeys
  }
})
</script>
<style lang="less" scoped>
.m-table-toolbar-center{
  display: flex;
  justify-content: center;
}
.m-table-toolbar-right {
  display: flex;
}
.m-table-toolbar-settings-left{
  flex: 1;
  display: flex;
  justify-content: end;
}
.m-table-toolbar-settings {
  padding-left: 8px;
}
</style>